<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<link rel="stylesheet" href="./resources/css/styles.css" />
	<title>Project Twitter</title>
</h:head>
<h:body styleClass="body">
	<h:panelGroup styleClass="container">

		<h:panelGroup styleClass="header" id="menuBarButtons">
			<a href="#"><img
				src="https://si0.twimg.com/a/1334853862/images/logos/full_logo_white_blue.png"
				width="200" height="37" alt="" /></a>
			<h:panelGroup styleClass="toolbar">
				<p:commandButton id="btnNewUser" value="New user"
					onclick="#{userBean.newUser()}" type="button"  rendered="#{!userBean.loggedIn}"/>
				<p:commandButton id="btnLogin" value="#{userBean.loginButtonText()}" onclick="#{userBean.handleSession()}"
					type="button" update="menuBarButtons" />
			</h:panelGroup>

			<p:dialog id="newUser" header="Make new user" widgetVar="newUser"
				modal="true" update="index.xhtml">
				<h:form id="formNewUser">
					<p:messages id="messages"  />
					<h:panelGrid columns="3">
						<h:outputLabel for="publicName" value="Public name:" />
						<p:inputText id="publicName"
							value="#{userBean.bufferUser.realName}" required="true"
							label="Public Name">
							<f:validateLength minimum="2" />
						</p:inputText>
						<p:message for="publicName" />

						<h:outputLabel for="username" value="Username:" />
						<p:inputText id="username" value="#{userBean.bufferUser.userName}"
							required="true" label="Username">
							<f:validateLength minimum="2" />
						</p:inputText>
						<p:message for="username" />
						<h:outputLabel for="pwd1" value="Password" />
						<p:password id="pwd1" value="#{userBean.bufferUser.password}"
							match="pwd2" label="Password 1" feedback="true" required="true" 
							validatorMessage="Password must be at least 5 ciphers long, be upper and lower case and contain digits!">
							<f:validateRegex
								pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,30}$" />
						</p:password>
						<p:message for="pwd2" />
						<h:outputLabel for="pwd2" value="Repeat:" />
						<p:password id="pwd2" value="#{userBean.bufferUser.password}"
							label="Password 2" required="true" />
						<p:message for="pwd2" />
					</h:panelGrid>
					<p:commandButton value="Create" id="btnNewUser"
						actionListener="#{userBean.createUserButton}" update="formNewUser, :form, :menuBarButtons, :userInfo, :userSubInfo, :userSubInfo2" 
						 oncomplete="handleLoginRequest(xhr, status, args);" />
				</h:form>
			</p:dialog>
			<script type="text/javascript">  
  					  function handleLoginRequest(xhr, status, args) {  
      						  if(!args.loggedIn) {  
         						  jQuery('#newUser').effect("shake", { times:3 }, 100);  
     					      } else {  
           						 newUser.hide();  
      						  }  
   						 }  
		  </script>  


			<p:dialog id="login" header="Login" widgetVar="login" modal="true">
				<h:form id="formLogin">

					<p:messages id="messages" />
					<h:panelGrid columns="3">
						<h:outputLabel for="username" value="Username:" />
						<p:inputText id="username" value="#{pprBean.username}"
							required="true" label="Username">
							<f:validateLength minimum="2" />
						</p:inputText>
						<p:message for="username" />

						<h:outputLabel for="password" value="Password:" />
						<p:password id="password" value="#{pprBean.password}"
							required="true" label="Password">
							<f:validateLength minimum="4" />
						</p:password>
						<p:message for="password" />
					</h:panelGrid>

					<p:commandButton value="Login" id="btnLogin"
						actionListener="#{pprBean.loginPerson}" />

				</h:form>
			</p:dialog>
		</h:panelGroup>
		<h:panelGroup styleClass="sidebarLeft"    id="userInfo">
			<h:form  >
				<h:outputLabel styleClass="publicName" value="#{userBean.currentUser.realName}"  />
				<br />
				<h:commandLink styleClass="lblViewProfile" id="lblViewProfile"
					value="View my profile page"  />
			</h:form>
			<h:panelGrid columns="2">
				<h:form rendered="#{userBean.loggedIn}" id="userSubInfo">
					<p:commandLink styleClass="following" id="following"
						actionListener="#{pprBean.savePerson}" ajax="false">
						<h:outputText value="# Following" />
					</p:commandLink>
					<p:commandLink styleClass="followers" id="followers"
						actionListener="#{pprBean.savePerson}" style="margin-right:20px;"
						ajax="false">
						<h:outputText value="# Followers" />
					</p:commandLink>
				</h:form>
				<br />
				<h:form id="userSubInfo2">
					<p:inputTextarea rows="2" cols="23" counter="counter"
						maxlength="70" counterTemplate="{0} characters remaining." />
					<h:outputText id="counter" />
					<h:panelGroup styleClass="btnTweet">
						<p:commandButton id="tweet" value="Tweet"
							action="#{shoppingCartBean.checkout}" />
					</h:panelGroup>
				</h:form>
			</h:panelGrid>
			<h:panelGroup>
				<h:form id="form">
					<h3 style="margin-top: 0">Twitter Users</h3>
					<p:orderList value="#{service.users}" var="user"
						controlsLocation="none" itemLabel="#{user}" itemValue="#{user}"
						iconOnly="true" id="basicList" />
				</h:form>
			</h:panelGroup>
		</h:panelGroup>
		<h:panelGroup styleClass="content">
			<p:fieldset legend="#Public Name">
				<h:panelGrid columns="2" cellpadding="10">
					<h:outputText value="pip pip første twit er her" />
				</h:panelGrid>
			</p:fieldset>
			<p:fieldset legend="#Public Name">
				<h:panelGrid columns="2" cellpadding="10">
					<h:outputText value="pip pip anden twit er her" />
				</h:panelGrid>
			</p:fieldset>
		</h:panelGroup>
	</h:panelGroup>
</h:body>
</html>